<template>
  <div class="detail">
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#007aff">
        <van-swipe-item
          v-for="photo in detail.photo"
          :key="`photo-${photo.id}`"
        >
          <img :src="photo.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="detail-info">
      <div class="detail-info-title">
        <span>
          包邮
        </span>
        <h2>
        {{ detail.title }}
        </h2>
      </div>
      <p>
        <span>用卷后</span>
        <span>￥{{ detail.price }}</span>
      </p>
      <div class="detail-info-last">
        <span>原价<del>￥{{ detail.originPrice }}</del></span>
        <span>月销量：{{ detail.saleNum }}</span>
      </div>
    </div>
    <div class="detail-img">
      <div class="detail-img-title">
        <span></span>
        <h4>淘宝图文详情</h4>
        <span></span>
      </div>
      <div
        v-for="(img, index) in detail.descContentList"
        :key="`img-${index}`"
        class="detail-img-photo"
      >
        <img v-if="img.image" :src="img.image.url" alt="">
      </div>
    </div>
    <div class="detail-footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon to="/cart" icon="cart-o" :badge="totalCount | over99" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车"  @click="addToCart({ detail })" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import {
  mapMutations,
  mapGetters
} from 'vuex'
export default {
  name: 'Detail',
  data () {
    return {
      id: '',
      detail: {}
    }
  },
  created () {
    // console.log(this.$route)
    // console.log(this.totalCount)
    // console.log(this.$route.query.id)
    this.id = this.$route.query.id
    this.$http.getDetail(this.id)
      .then(resp => {
        // console.log(resp)
        const {
          title,
          photo,
          id,
          originPrice,
          price,
          saleNum,
          descContentList
        } = resp.detail
        this.detail = {
          title,
          photo,
          id,
          originPrice,
          price,
          saleNum,
          descContentList
        }
        console.log(this.detail)
      })
  },
  methods: {
    ...mapMutations(['addToCart'])
  },
  computed: {
    ...mapGetters(['totalCount'])
  }
}
</script>

<style lang="scss" scoped>
.detail-info {
  padding: 10px;
  &-title {
    text-align: left;
    span {
      display: block;
      width: 50px;
      height: 20px;
      border: 1px solid;
      border-radius: 5px;
      text-align: center;
      line-height: 20px;
      font-size: 14px;
      color: saddlebrown;
      margin-right: 5px;
      margin-top: 2px;
    }
    h2 {
      color: #43240c;
      font-size: 18px;
    }
    display: flex;
  }
  p {
    padding:20px 0 10px 0;
    span {
      display: inline-block;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
    span:nth-child(2) {
      color: #fa585a;
      font-size: 20px;
    }
  }
  &-last {
    //  1
    font-size: 14px;
    color: #b1a9a5;
    display: flex;
    justify-content: space-between;
  }
}
.detail-img {
  &-title {
    text-align: center;
    color: #b1a9a5;
    font-size: 15px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      display: inline-block;
      width: 40px;
      height: 1px;
      background: #b1a9a5;
      line-height: 1px;
      margin: 0 5px;
    }
  }
  img {
    width: 100%;
    vertical-align: top;
    border: none;
  }
}
</style>
